import 'package:eh_mobile/common/utils/extension.dart';
import 'package:eh_mobile/common/values/svg_image.dart';
import 'package:eh_mobile/pages/main/smart_home_info/widgets/custom_switch.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';

import 'index.dart';

class DeviceInfoPage extends GetView<DeviceInfoController> {
  const DeviceInfoPage({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    return Container(
      padding: const EdgeInsets.all(12).r,
      child: ListView(
        children: [
          // 设备名称 设备区域
          Container(
            decoration: BoxDecoration(
                color: const Color.fromRGBO(255, 255, 255, 0.1),
                borderRadius: BorderRadius.circular(15).r),
            child: Column(
              children: [
                _buildClickCard(
                    '设备名称', controller.deviceName, SVGImage.listIcArrowSvg),
                Container(
                  margin: EdgeInsets.only(left: 19.r, right: 19.r),
                  height: 1,
                  color: const Color.fromRGBO(255, 255, 255, 0.05),
                ),
                _buildClickCard(
                    '设备区域', controller.areaName, SVGImage.listIcArrowSvg),
              ],
            ),
          ),
          12.sizedBoxHeight,
          // 隐藏设备
          _buildHiddenDeviceWidget(),
          12.sizedBoxHeight,
          GetBuilder(
            id: controller.personalDeviceViewId,
            builder: (DeviceInfoController bindController) {
              return Visibility(
                visible: bindController.isHiddenPerson,
                  child: _buildPersonalDeviceWidget());
            }
          ),
          // 制造商 型号 设备ID
          Container(
            decoration: BoxDecoration(
                color: const Color.fromRGBO(255, 255, 255, 0.1),
                borderRadius: BorderRadius.circular(15).r),
            child: Column(
              children: [
                _buildClickCard('制造商', 'Aqrar', SVGImage.listIcCopySvg),
                Container(
                  margin: EdgeInsets.only(left: 19.r, right: 19.r),
                  height: 1,
                  color: const Color.fromRGBO(255, 255, 255, 0.05),
                ),
                _buildClickCard('型号', 'ROM001', SVGImage.listIcCopySvg),
                Container(
                  margin: EdgeInsets.only(left: 19.r, right: 19.r),
                  height: 1,
                  color: const Color.fromRGBO(255, 255, 255, 0.05),
                ),
                _buildClickCard(
                    '设备ID', 'HUE_00178849F083_Light4', SVGImage.listIcCopySvg),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 创建可点击卡片item
  Widget _buildClickCard(String title, String content, String rightImageName) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.fromLTRB(20, 0, 17, 0).r,
      height: 60.r,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            title,
            style: 18.ts,
          ),
          const Expanded(child: SizedBox()),
          Text(
            content,
            style:
                14.ts.copyWith(color: const Color.fromRGBO(222, 222, 222, 0.7)),
          ),
          rightImageName.isNotEmpty ? 12.sizedBoxWidth : Container(),
          rightImageName.isNotEmpty
              ? SizedBox(
                  width: 22.r,
                  height: 22.r,
                  child: SvgPicture.asset(rightImageName),
                )
              : Container()
        ],
      ),
    ).onClick(() {
      controller.clickCardAction(title, content);
    });
  }

  // 创建隐藏设备卡片
  Widget _buildHiddenDeviceWidget() {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.fromLTRB(20, 0, 17, 0).r,
      height: 60.r,
      decoration: BoxDecoration(
          color: const Color.fromRGBO(255, 255, 255, 0.1),
          borderRadius: BorderRadius.circular(15).r),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            '隐藏设备',
            style: 18.ts,
          ),
          CustomSwitch(
            value: true,
            onChanged: (value) {
              controller.isHiddenPerson=!controller.isHiddenPerson;
              controller.update([controller.personalDeviceViewId]);
            },
          )
        ],
      ),
    );
  }

  Widget _getPersonalDeviceItemView(String name,int index) {
    return SizedBox(
      height: 60.h,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  name,
                  style: 18.ts,
                ),
                CustomSwitch(
                  value: true,
                  onChanged: (value) {},
                )
              ],
            ),
          ),
          Visibility(
            visible: index!=controller.personalDeviceList.length-1,
            child: const Divider(
              height: 1,
              color: Color.fromRGBO(255, 255, 255, 0.05),
            ),
          ),
        ],
      ),
    );
  }

  //创建个性化设备信息
  Widget _buildPersonalDeviceWidget() {
    List<Widget> rowList = List.generate(
        controller.personalDeviceList.length,
        (index) =>
            _getPersonalDeviceItemView(controller.personalDeviceList[index],index));
    return Container(
      margin:EdgeInsets.fromLTRB(0, 0, 0, 12.h),
      padding: const EdgeInsets.fromLTRB(20, 0, 17, 0).r,
      decoration: BoxDecoration(
          color: const Color.fromRGBO(255, 255, 255, 0.1),
          borderRadius: BorderRadius.circular(15).r),
      child: Column(
        children: rowList,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DeviceInfoController>(
      init: DeviceInfoController(),
      id: "device_info",
      builder: (_) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("设备信息"),
            automaticallyImplyLeading: false, //隐藏返回按钮
            leadingWidth: 70.r,
            leading: UnconstrainedBox(
              child: Container(
                width: 42.r,
                height: 32.r,
                padding: const EdgeInsets.fromLTRB(0, 4, 0, 4).r,
                decoration: BoxDecoration(
                  color: const Color.fromRGBO(222, 222, 222, 0.1),
                  borderRadius: BorderRadius.circular(16.r),
                ),
                child: SvgPicture.asset(
                  SVGImage.icReturnSvg,
                  // fit: BoxFit.contain,
                  color: Colors.white,
                ),
              ).onClick(() {
                Get.back();
              }),
            ),
          ),
          body: SafeArea(
            child: _buildView(),
          ),
        );
      },
    );
  }
}
